import React from 'react'
import {fetchPost} from './common/request'
import { Tooltip,Tree,Table, Card, Button, Form, Message, Row, Col, DatePicker,Modal,Input,Lable, Select,Popconfirm } from 'antd'
const TreeNode = Tree.TreeNode
const FormItem = Form.Item
import { successNotify, errorNotify, treeDeal, showLess } from './common/common'

class MessageServicer extends React.Component {
  constructor (props) {
    super(props)
  }


  state = {
    appList: [],
    selectedKey :null,
    servicerList :[],
    record : {},
    refRecord:{
      smsMsgLinkInfo:{}
    },
    sortedInfo: null,
    // 是否新增服务商服务商
    newServicerModal: false,
    newServicerRefModal : false,
    servicerRefData : []
  }


  // 新增服务商所填字段
  recordServicerNameChange= (e)=> {
    this.state.record.servicerName = e.target.value;
  }
  recordServicerCodeChange = (e)=> {
    this.state.record.servicerCode = e.target.value;
  }
  recordDescInfoChange=(e)=> {
    this.state.record.descInfo = e.target.value;
  }

  // 新增服务商关联所填字段
  refRecordServicerCodeChange = (value, option)=> {
    this.state.refRecord.servicerCode = value;
  }
  refRecordAppNameChange= (value, option)=> {
    this.state.refRecord.servicerCode = null
    this.props.form.resetFields()
    this.state.refRecord.appId = value;
  }
  refRecordUrlChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.url = e.target.value;
  }
  refChannelNameChange =(e) =>{
    this.state.refRecord.channelName = e.target.value;
  }

  refRecordUserNameChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.userName = e.target.value;
  }
  refRecordPasswordChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.password = e.target.value;
  }
  refRecordSignChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.sign = e.target.value;
  }
  refRecordInterfaceChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.interfaceUrl = e.target.value;
  }
  refRecordBatchSendInterfaceUrlChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.batchSendInterfaceUrl = e.target.value;
  }
  refRecordVerifyCodeInterfaceUrlChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.verifyCodeInterfaceUrl = e.target.value;
  }
  refRecordNoticeSendInterfaceUrlChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.noticeSendInterfaceUrl = e.target.value;
  }
  refRecordSaleSendInterfaceUrlChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.saleSendInterfaceUrl = e.target.value;
  }
  refRecordQueryStatusInterfaceUrlChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.queryStatusInterfaceUrl = e.target.value;
  }
  refRecordQueryBalanceInterfaceUrlChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.queryBalanceInterfaceUrl = e.target.value;
  }
  refRecordQueryMsgReportUrlInterfaceUrlChange=(e)=> {
    this.state.refRecord.smsMsgLinkInfo.queryMsgReportUrlInterfaceUrl = e.target.value;
  }


  // 加载树形控件
  onLoadTreeData = (treeNode) => {
    return new Promise((resolve) => {
      if (treeNode.props.children) {
        resolve();
        return;
      }
    });
  }
  renderTreeNodes = (data) => {
    return data.map((item) => {
      return <TreeNode title={item.servicerName} isLeaf={true} key={item.servicerCode} dataRef={item} />;
    });
  }
  // 显示对应app信息
  loadTemplateInfo = (selectedKeys) => {
    if (selectedKeys) {
      this.state.selectedKey = selectedKeys
      this.getServicerRefList(selectedKeys[0])
    } else {
      this.getServicerRefList()
    }
  }


  newServicer() {
    fetchPost('/servicer/addServicer',this.state.record).then( json => {
      if (json.code != 200) {
        errorNotify('Add failure',json.msg)
      } else {
        successNotify('Add success')
        this.state.record = {}
        this.getServicerList()
      }
    });
  }

  newRefServicer() {
    fetchPost('/servicer/addAppServicerRef',this.state.refRecord).then( json => {
      if (json.code != 200) {
        errorNotify('Add failure',json.msg)
      } else {
        successNotify('Add success')
        this.state.refRecord = {}
        this.getServicerRefList(this.state.selectedKey[0])
      }
    });
  }

  // 新增和修改对话框的维护
  showNewServicerRefModal = () => {
    this.getAppList()
    this.getMsgEnum()
    this.props.form.resetFields()
    this.state.refRecord.servicerCode=this.state.selectedKey ? this.state.selectedKey[0]:this.state.refRecord.servicerCode
    this.setState({
      servicerRefModalVis: true,
      newServicerRefModal: true,
    });
  }
  // 新增和修改对话框的维护
  showUpdateServicerRefModal = (record) => {
    this.props.form.resetFields();
    this.state.record = record
    this.setState({
      record : record,
      servicerRefModalVis: true,
      recordIsNew: false,
    });
  }

  handleServicerRefMOk = (e) => {

    this.props.form.validateFields((err, values) => {
      console.log(err)
      if (!err || (!err.appId && !err.servicerCode && !err.channelName)) {
        console.log(err)
        // 判断是新增还是修改
        if(this.state.newServicerRefModal){
          this.newRefServicer()
        }

        this.setState({
          servicerRefModalVis: false,
        });
      }
    });
  }
  handleServicerRefMCancel = (e) => {
    this.setState({
      servicerRefModalVis: false,
    });
  }


  // 新增和修改对话框的维护
  showNewServicerModal = () => {
    console.log(this.state.record)
    this.props.form.resetFields()
    this.setState({
      servicerModalVis: true,
      newServicerModal: true,
    });
  }
  // 新增和修改对话框的维护
  showUpdateServicerModal = (record) => {
    this.props.form.resetFields();
    this.state.record = record
    this.setState({
      record : record,
      servicerModalVis: true,
      newServicerModal: false,
    });
  }

  handleServicerOk = (e) => {
    this.props.form.validateFields((err, values) => {
      if (!err || (!err.servicerName)) {
        if(this.state.newServicerModal){
          this.newServicer()
          this.state.record = {}
        }
        // 判断是新增还是修改
        // console.log(this.state.record? this.state.record : "")
        this.setState({
          servicerModalVis: false,
        });
      }
    });
  }

  handleServicerCancel = (e) => {
    this.setState({
      servicerModalVis: false,
    });
  }

  componentDidMount() {
    // console.log(this.refs.refModal.props.children.ref)
    this.getMsgEnum()
    this.getServicerRefList()
    this.getServicerList()
  }

  getServicerRefList = (servicerCode) => {
    var param = null;
    if(servicerCode) {
      param = {}
      param.servicerCode = servicerCode
    }
    fetchPost('/servicer/getListByServicer',param).then( json => {
      // var temp = this.dealTemplateList(json.data)

      if (json.data != null) {
        this.setState({
          servicerRefData: json.data
        });
      }
    });
  }

  getServicerList = () => {
    fetchPost('/servicer/getAllServicer').then( json => {
      if (json.data != null) {
        this.setState({
          servicerList : json.data
        });
      }
    });
  }

  getAppList() {
    fetchPost('/appInfo/getAppInfo').then( json => {
      if (json.data != null) {
        treeDeal(json.data)
        this.setState({
          appList: json.data
        });
      }
    });
  }

  getMsgEnum() {
    fetchPost('/template/getMsgType').then( json => {
      if (json.data != null) {
        this.setState({
          msgEnums: json.data
        });
      }
    });
  }




  handleChange = (pagination, filters, sorter) => {
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  }

  // 删除选中
  onDeleteLists = () => {
  }

  render() {
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};


    const columns = [
      {
        title: 'App Name',
        dataIndex: 'appName',
        key: 'appName',
        width:100,
        sorter: (a, b) => a.appName > b.appName ? 1 : -1,
        sortOrder: sortedInfo.columnKey === 'appName' && sortedInfo.order,
      }, {
        title: 'Servicer Code',
        dataIndex: 'servicerCode',
        key: 'servicerCode',
        width:100,
        sorter: (a, b) => a.servicerCode > b.servicerCode ? 1 : -1,
        sortOrder: sortedInfo.columnKey === 'servicerCode' && sortedInfo.order,
      }, {
        title: 'Channel Name',
        dataIndex: 'channelName',
        key: 'channelName',
        width:100,
        sorter: (a, b) => a.channelName > b.channelName ? 1 : -1,
        sortOrder: sortedInfo.columnKey === 'channelName' && sortedInfo.order,
      }, {
        title: 'Link Info',
        dataIndex: 'linkInfo',
        key: 'linkInfo',
        // sorter: (a, b) => a.linkInfo > b.linkInfo ? 1 : -1,
        width : 600,
        // sortOrder: sortedInfo.columnKey === 'linkInfo' && sortedInfo.order,
        render: (text, record) => {
          return showLess(text,record,600)
        }
      }
      /*, {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
          width:200,
        render: (text, record) => {
          const {editable} = record;
          return (
            <div>
              <Button onClick={this.showUpdateModal.bind(this,record)}>
                修改
              </Button>
              <Popconfirm title="确定删除该条数据?" onConfirm={() => this.onDelete(record.key)}>
                <Button>
                  删除
                </Button>
              </Popconfirm>
            </div>
          );
        }
      }*/
    ];

    const appOptions = this.state.appList.map(d => <Option key={d.appId}>{d.appName}</Option>);
    const servicerOptions = this.state.servicerList? this.state.servicerList.map(d => <Option key={d.servicerCode}>{d.servicerName}</Option>) : null;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    const { getFieldDecorator } = this.props.form
    return(
      <Card>
        <Row>
          <Col span={4}>
            <Tree ref="tree" loadData={this.onLoadTreeData} onSelect={this.loadTemplateInfo}>
              {this.renderTreeNodes(this.state.servicerList)}
            </Tree>
          </Col>
          <Col span={20}>
            <div>
              <Button style={{'margin-bottom':'10'}} onClick={this.showNewServicerModal}>New Service Provider</Button>
              <Button style={{'margin-bottom':'10'}} onClick={this.showNewServicerRefModal}>New service Provider Transmission Channel</Button>
              <Popconfirm title="Make sure to delete these data?" onConfirm={() => this.onDeleteLists()}>
                <Button  style={{display:'none'}}>
                  Delete
                </Button>
              </Popconfirm>
            </div>
            <Table dataSource={this.state.servicerRefData} onChange={this.handleChange} columns={columns}
                   pagination={{pageSize:10}} rowKey="asRefId">
            </Table>
          </Col>

        </Row>

        <Modal ref="modal"
               title={this.state.newServicerModal ? "New":"Modify"}
               visible={this.state.servicerModalVis}
               onOk={this.handleServicerOk}
               onCancel={this.handleServicerCancel}
        >
          <Form ref="form213" props="form">
            <FormItem {...formItemLayout} label = "Service provider">

              {getFieldDecorator('servicerName', {
                initialValue : this.state.record? this.state.record.servicerName || "" : "",
                rules: [
                  { required: true, message: 'Please enter the name of the service provider!' },
                ],
              })(
                <Input placeholder="Service provider" onChange={this.recordServicerNameChange}/>
              )}
            </FormItem>

            <FormItem {...formItemLayout} label = "Description">

              {getFieldDecorator('descInfo', {
                initialValue : this.state.descInfo? this.state.record.descInfo || "" : "",
                rules: [],
              })(
                <Input placeholder="Description" onChange={this.recordDescInfoChange}/>
              )}
            </FormItem>

          </Form>
        </Modal>


        <Modal ref="refModal"
               title={this.state.newServicerRefModal? "New":"Modify"}
               visible={this.state.servicerRefModalVis}
               onOk={this.handleServicerRefMOk}
               onCancel={this.handleServicerRefMCancel}
        >
          <Form ref="refForm">
            <FormItem {...formItemLayout} label = "app name">

              {getFieldDecorator('appId', {
                initialValue : this.state.refRecord? this.state.refRecord.appId || "" : "",

                rules: [
                  { required: true, message: 'Please select the app name!' },
                ],
              })(
                <Select placeholder="Please" onSelect={this.refRecordAppNameChange}>
                  {appOptions}
                </Select>
              )}
            </FormItem>

            <FormItem {...formItemLayout} label = "Service provider">

              {getFieldDecorator('servicerCode', {
                initialValue : this.state.refRecord? this.state.refRecord.servicerCode || "" : "",

                rules: [
                  { required: true, message: 'Please select a service provider!' },
                ],
              })(
                <Select placeholder="Please select a service provider" onSelect={this.refRecordServicerCodeChange}>
                  {servicerOptions}
                </Select>
              )}
            </FormItem>

            <FormItem {...formItemLayout} label = "Channel Name">
              {getFieldDecorator('channelName', {
                initialValue : this.state.refRecord.channelName? this.state.refRecord.channelName || "" : "",
                rules: [{ required: true, message: 'Please fill in the channel name!' },],
              })(
                <Input placeholder="Channel Name" onChange={this.refChannelNameChange}/>
                )}
            </FormItem>

            <FormItem {...formItemLayout} label = "Interface Link">
              {getFieldDecorator('url', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.url || "" : "",
                rules: [],
              })(
                <Input placeholder="Interface Link" onChange={this.refRecordUrlChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "User Name">
              {getFieldDecorator('userName', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.userName || "" : "",
                rules: [],
              })(
                <Input placeholder="User name" onChange={this.refRecordUserNameChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "Password">
              {getFieldDecorator('password', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.password || "" : "",
                rules: [],
              })(
                <Input placeholder="Password" onChange={this.refRecordPasswordChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "Sign">
              {getFieldDecorator('sign', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.sign || "" : "",
                rules: [],
              })(
                <Input placeholder="Sign" onChange={this.refRecordSignChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "Ordinary Single SMS Sending Interface Address">
              {getFieldDecorator('interfaceUrl', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.interfaceUrl || "" : "",
                rules: [],
              })(
                <Input placeholder="Ordinary single SMS sending interface address" onChange={this.refRecordInterfaceChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "Batch Send URL">
              {getFieldDecorator('batchSendInterfaceUrl', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.batchSendInterfaceUrl || "" : "",
                rules: [],
              })(
                <Input placeholder="Batch Send URL" onChange={this.refRecordBatchSendInterfaceUrlChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "Verify Code Interface URL">
              {getFieldDecorator('verifyCodeInterfaceUrl', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.verifyCodeInterfaceUrl || "" : "",
                rules: [],
              })(
                <Input placeholder="Verify Code Interface URL" onChange={this.refRecordVerifyCodeInterfaceUrlChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "Notice SMS Send Interface URL">
              {getFieldDecorator('noticeSendInterfaceUrl', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.noticeSendInterfaceUrl || "" : "",
                rules: [],
              })(
                <Input placeholder="Notice sms send interface url" onChange={this.refRecordNoticeSendInterfaceUrlChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "Marketing SMS">
              {getFieldDecorator('saleSendInterfaceUrl', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.saleSendInterfaceUrl || "" : "",
                rules: [],
              })(
                <Input placeholder="Marketing SMS" onChange={this.refRecordSaleSendInterfaceUrlChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "SMS Status Query">
              {getFieldDecorator('queryStatusInterfaceUrl', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.queryStatusInterfaceUrl || "" : "",
                rules: [],
              })(
                <Input placeholder="SMS status query" onChange={this.refRecordQueryStatusInterfaceUrlChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "Get Balance">
              {getFieldDecorator('queryBalanceInterfaceUrl', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.queryBalanceInterfaceUrl || "" : "",
                rules: [],
              })(
                <Input placeholder="Get balance" onChange={this.refRecordQueryBalanceInterfaceUrlChange}/>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label = "SMS Report">
              {getFieldDecorator('queryMsgReportUrlInterfaceUrl', {
                initialValue : this.state.refRecord.smsMsgLinkInfo? this.state.refRecord.smsMsgLinkInfo.queryMsgReportUrlInterfaceUrl || "" : "",
                rules: [],
              })(
                <Input placeholder="SMS report" onChange={this.refRecordQueryMsgReportUrlInterfaceUrlChange}/>
              )}
            </FormItem>
          </Form>
        </Modal>

      </Card>
    );
  }
}


MessageServicer = Form.create()(MessageServicer)
export default MessageServicer


